<template>
    <view class="tab-bar">
        <view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: activeTab === tab.id }"
            @click="switchTab(tab.id)">
            <image class="tab-icon" :src="activeTab === tab.id ? tab.activeIcon : tab.icon"></image>
            <text class="tab-text">{{ tab.text }}</text>
        </view>
    </view>
</template>

<script>
export default {
    name: 'TabBar',
    props: {
        activeTab: {
            type: String,
            default: 'lifeReview'
        },
        isLoggedIn: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            // 登录前的底部导航栏
            guestTabs: [
                {
                    id: 'education',
                    text: '生命教育',
                    icon: '/assets/tabBar/education.png',
                    activeIcon: '/assets/tabBar/education-active.png',
                    url: '/pages/storylibrary/education/index'
                },
                {
                    id: 'storyCollection',
                    text: '生命故事',
                    icon: '/assets/tabBar/storyCollection.png',
                    activeIcon: '/assets/tabBar/storyCollection-active.png',
                    url: '/pages/storylibrary/storyCollection/index'
                },
                {
                    id: 'activity',
                    text: '公益活动',
                    icon: '/assets/tabBar/activity.png',
                    activeIcon: '/assets/tabBar/activity-active.png',
                    url: '/pages/storylibrary/activity/index'
                },
                {
                    id: 'login',
                    text: '登录/注册',
                    icon: '/assets/tabBar/user.png',
                    activeIcon: '/assets/tabBar/user-active.png',
                    url: '/pages/login/login'
                }
            ],
            // 登录后的底部导航栏
            userTabs: [
                {
                    id: 'lifeReview',
                    text: '人生回顾',
                    icon: '/assets/tabBar/storyCollection.png',
                    activeIcon: '/assets/tabBar/storyCollection-active.png',
                    url: '/pages/lifeReview/personalStory'
                },
                {
                    id: 'memoryCollection',
                    text: '记忆收集',
                    icon: '/assets/tabBar/education.png',
                    activeIcon: '/assets/tabBar/education-active.png',
                    url: '/pages/memoryCollection/storyCollection'
                },
                {
                    id: 'storyMuseum',
                    text: '故事博物馆',
                    icon: '/assets/tabBar/activity.png',
                    activeIcon: '/assets/tabBar/activity-active.png',
                    url: '/pages/storylibrary/index'
                },
                {
                    id: 'userCenter',
                    text: '个人中心',
                    icon: '/assets/tabBar/user.png',
                    activeIcon: '/assets/tabBar/user-active.png',
                    url: '/pages/userCenter/profile'
                }
            ]
        };
    },
    computed: {
        tabs() {
            return this.isLoggedIn ? this.userTabs : this.guestTabs;
        }
    },
    methods: {
        switchTab(tabId) {
            if (this.activeTab === tabId) return;
            this.$emit('tab-change', tabId);

            // 获取对应的URL
            const tab = this.tabs.find(t => t.id === tabId);
            if (tab && tab.url) {
                uni.navigateTo({
                    url: tab.url
                });
            }
        }
    }
};
</script>

<style>
.tab-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 110rpx;
    background-color: #ffffff;
    box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
    z-index: 999;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    padding: 0 20rpx;
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10rpx 0;
    position: relative;
    transition: all 0.3s ease;
}

.tab-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 4rpx;
    background-color: #1aad19;
    border-radius: 4rpx;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.tab-item.active::after {
    width: 40rpx;
}

.tab-icon {
    width: 52rpx;
    height: 52rpx;
    margin-bottom: 6rpx;
    transition: all 0.3s ease;
}

.tab-item.active .tab-icon {
    transform: translateY(-4rpx);
}

.tab-text {
    font-size: 24rpx;
    color: #666666;
    transition: all 0.3s ease;
}

.tab-item.active .tab-text {
    color: #1aad19;
    font-weight: bold;
    transform: scale(1.05);
}
</style>